<template>
  <div class="top">
    <div class="name">
      <router-link to="/colorful-egg">
        <img 
          :src="require('@/assets/img/Literature Trace.png')" 
          class="img"
          alt="Literature Trace"
          @click.stop
        />
      </router-link>
    </div>
    <div class="nav">
      <ul>
        <li><router-link to="/home" active-class="home">Home</router-link></li>
        <li>
          <router-link 
            :to="exploreLink" 
            :class="{ exp: isExploreActive }"
          >
            {{ exploreText }}
          </router-link>
        </li>
        <li>
          <router-link 
            :to="worksLink" 
            :class="{ works: isWorksActive }"
          >
            Works
          </router-link>
        </li>
        <li>
          <router-link 
            :to="quotesLink" 
            :class="{ exp: isQuotesActive }"
          >
            Quote
          </router-link>
        </li>
        <li><router-link to="/user" active-class="user-active">User</router-link></li>
        <li><router-link to="/">Exit</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      currentWriterName: ''
    }
  },
  computed: {
    isExploreActive() {
      const path = this.$route.path;
      return path.startsWith('/explore') || path.startsWith('/experience/');
    },
    isWorksActive() {
      return this.$route.path.startsWith('/works');
    },
    isQuotesActive() {
      return this.$route.path.startsWith('/quotes');
    },
    currentWriterId() {
      return this.$route.params.id || this.$route.params.writerId || null;
    },
    exploreLink() {
      const isRandomMode = this.$route.query.mode === 'random';
      if (this.currentWriterId && isRandomMode) {
        return `/experience/${this.currentWriterId}?mode=random`;
      }
      if (this.currentWriterId) {
        return `/experience/${this.currentWriterId}`;
      }
      return '/explore';
    },
    worksLink() {
      const path = this.$route.path;
      const isWriterPage = path.startsWith('/experience') || path.startsWith('/quotes') || path.startsWith('/works');
      const isRandomMode = this.$route.query.mode === 'random';
      
      if (isWriterPage && this.currentWriterId) {
        return isRandomMode ? `/works/${this.currentWriterId}?mode=random` : `/works/${this.currentWriterId}`;
      }

      return '/works'; 
    },
    quotesLink() {
      const isRandomMode = this.$route.query.mode === 'random';
      if (this.currentWriterId) {
        return isRandomMode ? `/quotes/${this.currentWriterId}?mode=random` : `/quotes/${this.currentWriterId}`;
      }
      return '/quotes'; // 默认链接
    },
    exploreText() {
      const path = this.$route.path;
      const isWriterPage = path.startsWith('/experience') || path.startsWith('/quotes') || path.startsWith('/works');
      
      if (isWriterPage && this.currentWriterId && this.currentWriterName) {
        return this.currentWriterName;
      }
      return 'Explore';
    }
  },
  watch: {
    '$route'(to) {
      // 当路由变化时，如果是作家相关页面，获取作家名称
      const writerId = to.params.id || to.params.writerId;
      if (writerId && writerId !== 'new' && !isNaN(writerId)) {
        this.fetchWriterName(writerId);
      } else {
        this.currentWriterName = '';
      }
    }
  },
  methods: {
    async fetchWriterName(writerId) {
      // 检查writerId是否有效（不是'new'且是数字）
      if (!writerId || writerId === 'new' || isNaN(writerId)) {
        this.currentWriterName = '';
        return;
      }
      
      try {
        const response = await this.$axios.get(`/api/writers/${writerId}`)
        this.currentWriterName = response.data.name
      } catch (error) {
        console.error('获取作家名称失败：', error)
        this.currentWriterName = ''
      }
    }
  },
  mounted() {
    // 组件挂载时，如果是作家相关页面，获取作家名称
    const writerId = this.$route.params.id || this.$route.params.writerId;
    if (writerId && writerId !== 'new' && !isNaN(writerId)) {
      this.fetchWriterName(writerId);
    }
  }
}
</script>

<style scoped>
.name a {
  display: inline-block; 
  cursor: pointer;
}

.name a, .name a img {
  border: none;
  outline: none;
}

@import '../assets/css/navbar.css';
</style> 